<template>
  <el-dialog
    custom-class="point-association-dialog"
    :visible.sync="dialogVisible"
    width="900px"
    v-dialogDrag
    title="测点关联"
    :before-close="handleCancel"
  >
    <!-- 主要内容区域 -->
    <div class="association-wrapper">
      <!-- 左侧菜单树 -->
        <BoxWithTitle class="left-wrapper" title="目录" icon="&#xe6f2;">
            <div class="menu-tree">
                <treeMenu :treeData="menuList" name="lable" ref="treeMenu" nodeKey="id" expandALL @menuLeftClick="handleNodeClick" />
            </div>
        </BoxWithTitle>

      <!-- 右侧内容区域 -->
      <div class="association-content">
        <div class="content-header">
          <span class="blueText">图像预览</span>
        </div>
        <div class="image-container">
          <img   :src="imgUrl"/>
        </div>
      </div>
    </div>
    <div class="btnGroup" style="margin-top:20px">
        <el-button @click="handleCancel" size="small" icon="el-icon-circle-close">取消</el-button>
        <el-button type="primary" @click="handleAssociation" size="small" icon="el-icon-circle-check">
          关联
        </el-button>
      </div>
  </el-dialog>
</template>

<script>
import {GetBWTBaseTree} from '@/api/https'
import BoxWithTitle from '@/components/base/BoxWithTitle.vue'
import treeMenu from '@/components/base/treeMenu.vue'
export default {
  name: 'PointAssociationDialog',
  components:{BoxWithTitle,treeMenu},
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    treeData: {
      type: Array,
      default: () => []
    },
    imageUrl: {
      type: String,
      default: ''
    },
    stationId: {
      type: [String, Number],
      default: ''
    }
  },
  data() {
    return {
      dialogVisible: this.visible,
      menuList:[],
      imgUrl:'',
      imageId:''
    };
  },
  watch: {
    visible(newVal) {
      this.dialogVisible = newVal;
      if(newVal){
        this.imgUrl = ''
        this.imageId = ''
        this.getMenuList()
      }
    },
    dialogVisible(newVal) {
      this.$emit('update:visible', newVal);
    },
  },
  methods: {
    getMenuList(){
        GetBWTBaseTree({StationID: this.stationId}).then(res=>{
            if (res.isSuccess) {
                this.menuList = res.data
            } else {
                this.menuList = []
            }
        })
    },
    handleNodeClick(data) {
      this.imgUrl = data.imgUrl || ''
      this.imageId = data.id || ''
    },
    handleCancel() {
      this.imgUrl = ''
      this.imageId = ''
      this.dialogVisible = false;
    },
    handleAssociation(){
        this.$emit('associationSave',this.imageId)
    }
  }
};
</script>

<style scoped lang="scss">
/* 主要内容区域样式 */
.association-wrapper {
  display: flex;
  flex-direction: row;
  justify-content: start;
  height: 500px;

  .left-wrapper{
    width: 320px;
    height: 500px;
    border:1px solid #f0f0f0;
  }
  .menu-tree{
    height: 450px;
    overflow: auto;
  }
}


/* 右侧内容区域样式 */
.association-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  margin-left: 10px;
   border:1px solid #f0f0f0;
}

.content-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px;
  border-bottom: 1px solid #e6e6e6;
  font-weight: 500;
  color: #606266;
}

.image-container {
  flex: 1;
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  background: #fafafa;
  padding: 20px;
}

.image-container img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  transition: transform 0.3s ease;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border-radius: 4px;
}
</style>